<template>
  <div class="app-container home">
    <div class="bg_fff p_10 listbody">
      <div class="flexrowbetween flexwrapper" style="align-items: flex-start">
        <div class="flex">
          <div
            class="iconbox flexcenter commhover blackbg mr_10"
            @click="resetQuery"
          >
            <i class="el-icon-refresh f-20" :class="{ rotate: isrefresh }"></i>
          </div>
          <el-button plain type="primary" size="mini" @click="handleAdd"
            >添加</el-button
          >
          <el-button
            plain
            type="danger"
            :disabled="multiple"
            size="mini"
            @click="handleDelete"
            >删除</el-button
          >
        </div>
        <div>
          <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            :inline="true"
            label-width="0"
          >
            <el-form-item prop="name">
              <el-input
                class="searchinput"
                v-model="queryParams.name"
                placeholder="请输入用户名"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item>
              <el-dropdown trigger="click">
                <el-button size="mini" class="plr_9">
                  <svg-icon class-name="f-14" icon-class="listicon" />
                  <i class="el-icon-caret-bottom el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <div class="dropbody">
                    <el-checkbox-group
                      v-model="checkedOption"
                      class="flexcolumn"
                      @change="changeSelect"
                    >
                      <el-checkbox
                        v-for="(item, index) in selectoptions"
                        :label="item.label"
                        :key="index"
                        class="m_5"
                        >{{ item.label }}</el-checkbox
                      >
                    </el-checkbox-group>
                  </div>
                </el-dropdown-menu>
              </el-dropdown>
            </el-form-item>
            <el-form-item>
              <el-button class="f-14"
                icon="el-icon-search"
                size="mini"
                @click="handleQuery"
                ></el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <el-table
        v-loading="loading"
        :data="list"
        border
        ref="tablelayout"
        class="commtable"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column v-if="adminOption.includes('ID')"
          align="center"
          label="ID"
          prop="id"
          width="120"
        ></el-table-column>
        <el-table-column v-if="adminOption.includes('用户名')"
          align="center"
          label="用户名"
          prop="name"
        ></el-table-column>
        <el-table-column v-if="adminOption.includes('昵称')"
          align="center"
          label="昵称"
          prop="name"
        ></el-table-column>
        <el-table-column v-if="adminOption.includes('所属级别')"
          align="center"
          label="所属级别"
          prop="name"
        ></el-table-column>
        <el-table-column v-if="adminOption.includes('Email')"
          align="center"
          label="Email"
          prop="name"
        ></el-table-column>
        <el-table-column label="状态" align="center" v-if="adminOption.includes('状态')" width="160">
          <template slot-scope="scope">
            <el-tag type="success" class="tag_success"
              >{{ scope.row.status }}正常</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column v-if="adminOption.includes('最后登录')"
          align="center"
          label="最后登录"
          prop="date"
        ></el-table-column>
        <el-table-column
          prop="created_at"
          label="操作"
          width="160"
          fixed="right"
          align="center"
        >
          <template slot-scope="scope">
            <div class="flex btnflex">
              <div
                class="commhover btn_green c_fff mr_10"
                @click="handleUpdate(scope.row)"
              >
                <i class="el-icon-edit f-14"></i> 编辑
              </div>
              <div
                class="commhover btn_yellow c_fff"
                @click="handleDelete(scope.row)"
              >
                <i class="el-icon-delete f-14"></i> 删除
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.num"
        @pagination="getList"
      />
    </div>
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="680px"
      class="dialogheaderbg"
      :before-close="handleCloseAdd"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" label-position="left">
        <el-form-item label="所属级别" prop="level">
          <el-select clearable v-model="form.level" placeholder="请选择所属级别" style="width:100%">
            <el-option v-for="(item, index) in levelList" :key="index" :value="item.value">{{item.label}}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="Email" prop="email">
          <el-input v-model="form.email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="form.nickname" placeholder="请输入昵称" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" placeholder="请输入密码" show-password />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="2">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="handleCloseAdd">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      queryParams: {
        page: 1,
        num: 10,
        name: undefined,
      },
      total: 1,
      loading: false,
      list: [{ id: 1 }, { id: 2 }],
      checkedOption: [],
      isrefresh: false,
      selectoptions: [
        { id: 1, label: "ID" },
        { id: 2, label: "用户名" },
        { id: 3, label: "昵称" },
        { id: 4, label: "所属级别" },
        { id: 5, label: "Email" },
        { id: 6, label: "状态" },
        { id: 7, label: "最后登录" },
      ],
      levelList:[
        {label:'超级管理员',value:1},
        {label:'普通管理员',value:2},
        {label:'管理员',value:3},
        {label:'普通用户',value:4},
      ],
      multiple: true,
      title: "",
      // 是否显示弹出层
      open: false,
      form: {},
      // 表单校验
      rules: {
        level: [{ required: true, message: "请选择所属级别", trigger: "change" }],
        username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        nickname: [{ required: true, message: "请输入昵称", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        status:[{ required: true, message: "请选择状态", trigger: "change" }]
      },
    };
  },

  props: {
    type: {
      type: Number,
      default: 1,
    },
  },

  computed: {
    ...mapState({
      adminOption: (state) => state.paramsoption.adminOption,
    }),
  },

  created() {
    let adminOption = JSON.parse(localStorage.getItem("adminOption"));
    if (adminOption) {
      this.changeSelect(adminOption);
    }
    this.checkedOption = this.adminOption;
  },

  methods: {
    getList() {
      this.loading = true;
      let params = { ...this.queryParams };
      //   if(this.queryParams.type=='创建日期' && this.time && this.time.length){
      //     params.startime = this.time[0]
      //     params.endtime = this.time[1]
      //   }
      //   feedbacklist(params).then((response) => {
      //     this.tableData = response.data.list;
      //     this.total = response.data.count;
      //     this.loading = false;
      //   });
      this.isrefresh = false;
      this.loading = false;
    },

    changeSelect(arr) {
      this.$store.commit("SET_ADMINOPTION", arr);
      this.$nextTick(() => {
        //在数据加载完，重新渲染表格
        this.$refs.tablelayout && this.$refs.tablelayout.doLayout();
      });
    },

    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },

    resetQuery() {
      this.isrefresh = true;
      this.resetForm("queryForm");
      this.handleQuery();
    },

    handleSelectionChange(selection) {
      this.rowids = selection.map((item) => item.id);
      this.multiple = !selection.length;
    },

    reset() {
      this.form = {
        id:'',
        level: undefined,
        username: undefined,
        nickname:undefined,
        email:undefined,
        password:undefined,
        status: 1
      };
      this.resetForm("form");
    },

    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加";
    },

    handleCloseAdd() {
      this.open = false;
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.form = row;
      this.open = true;
      this.title = "修改";
      //   const roleId = row.roleId || this.ids;
      //   const roleMenu = this.getRoleMenuTreeselect(roleId);
      //   getRole(roleId).then((response) => {
      //     this.form = response.data;
      //     this.open = true;
      //     this.title = "修改";
      //   });
    },

    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.roleId != undefined) {
            this.form.menuIds = this.getMenuAllCheckedKeys();
            updateRole(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            this.form.menuIds = this.getMenuAllCheckedKeys();
            addRole(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const infoIds = row.id || this.rowids;
      this.$modal
        .confirm('是否确认删除访问编号为"' + infoIds + '"的数据项？')
        .then(function () {
          return delLogininfor(infoIds);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.iconbox {
  width: 32px;
  height: 26px;
}
</style>
